<script setup>
import { auditBusinessLicenseApi, getJobListApi, jobAuditApi } from '@/api/job'
import { updateUserStatusApi } from '@/api/user'
import Form from '@/components/User/Form.vue'
import Pagization from '@/components/common/pagization.vue'
import Table from '@/components/Job/table.vue'
import { showStatusMessage } from '@/utils/common/showMessage'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import {
  Search,
  List,
  Document,
  OfficeBuilding,
  Briefcase,
  Location,
  Timer
} from '@element-plus/icons-vue'
import { updateJobStatusApi } from '@/api/login'

const router = useRouter()
const userStore = useUserStore()
// 表单数据
const formData = ref({
  account: '',
  enterpriseName: '',
  jobName: '',
  status: ''
})
const formModel = [
  {
    prop: 'jobName',
    label: '职位名称',
    type: 'input'
  },

  {
    prop: 'status',
    label: '状态',
    type: 'select',
    options: [
      { label: '待审核', value: 0 },
      { label: '审核未通过', value: 1 },
      { label: '审核已通过', value: 2 }
    ]
  }
]
const btnOpt = [
  {
    name: '查询',
    btnType: '',
    prop: 'query'
  },
  {
    name: '重置',
    btnType: 'info',
    prop: 'reset'
  }
]
const formRef = ref(null)
const pagizationToatl = ref(null)
/**
 * 获取表格数据
 */
async function getTableData(data) {
  const res = await getJobListApi({
    ...data,
    account: userStore.userInfo.account
  })
  tableData.value = res.data.map((item) => {
    return {
      ...item,
      jobLocation: JSON.parse(item.jobLocation).join('')
    }
  })
  pagizationToatl.value = res.total
}
getTableData()
const pagizationRef = ref(null)
const selectFormRef = ref(null)
/**
 * 点击重置按钮
 */
function reset() {
  getTableData()
  pagizationRef.value.reset()
  selectFormRef.value.reset()
}

/**
 * 表单按钮点击事件
 * @param type 操作类型
 * @param data 表单数据
 */
function handleForm(type, data) {
  // console.log(type, data)
  switch (type) {
    case 'query':
      query(data)
      break
    case 'add':
      addForm()
      break
    case 'output':
      exportToExcel()
      break
    case 'reset':
      reset(data)
      break
    case 'import':
      handleUpload(data)
    default:
      break
  }
}

/**
 * 表单查询事件
 * @param {Object} data 查询条件
 */
const queryData = ref(null)
async function query(data) {
  queryData.value = data
  const res = await getTableData(data)
  console.log(res)
  showStatusMessage(res)
  tableData.value = res.data
  pagizationToatl.value = res.total
}

// 列表数据
const tableData = ref([])
const columns = [
  {
    prop: 'account',
    label: '账号'
  },
  {
    prop: 'enterpriseName',
    label: '企业名称',
    width: 180
  },
  {
    prop: 'jobName',
    label: '职位名称',
    width: 180
  },
  {
    prop: 'salary',
    label: '薪资'
  },
  {
    prop: 'jobName',
    label: '职位名称'
  },
  {
    prop: 'jobLocation',
    label: '地址'
  },
  {
    prop: 'jobDetailLocation',
    label: '详细地址'
  },

  {
    prop: 'create_time',
    label: '申请时间',
    width: 170
  },
  {
    prop: 'jobStatus',
    label: '职位状态',
    slot: 'jobStatus',
    width: '120'
  },
  {
    prop: 'status',
    label: '审核情况',
    width: '120'
  }
]
const options = [
  {
    label: '下线',
    type: 'warning',
    prop: 'Downline',
    show: (row) => row.jobStatus === 0
  },
  {
    label: '上线',
    type: 'success',
    prop: 'Topline',
    show: (row) => row.jobStatus === 1
  },
  {
    label: '详情',
    type: 'primary',
    prop: 'detail'
  }
]

/**
 * 表格的操作事件
 * @param {Object} data  操作行的数据
 * @param {String} type 操作类型-'edit'-'delete'
 */
function handleTable(data, type) {
  switch (type) {
    case 'Downline':
      handletTableDownline(data)
      break
    case 'Topline':
      handletTableTopline(data)
      break
    case 'detail':
      handletTableDetail(data)
      break
    default:
      break
  }
}
// 分页器条数发生变化
function handleSizeChange(val) {
  const data = selectFormRef.value.getValue()
  console.log('条数发生变化')
  getTableData({ size: val, ...data })
  pagizationRef.value.reset()
}
// 分页器页数发生变化
function handleCurrentChange(page, size) {
  const data = selectFormRef.value.getValue()
  console.log('页数发生变化')
  getTableData({ page, size, ...data })
}

// 下线职位
async function handletTableDownline(data) {
  console.log(data)
  const res = await updateJobStatusApi({
    id: data.id,
    jobStatus: 1
  })
  showStatusMessage(res)
  getTableData()
}
// 上线职位
async function handletTableTopline(data) {
  console.log(data)
  const res = await updateJobStatusApi({
    id: data.id,
    jobStatus: 0
  })
  showStatusMessage(res)
  getTableData()
}

// 控制抽屉显示
const dialog = ref(false)
// 抽屉数据
const dialogData = ref({})
// 详情
function handletTableDetail(data) {
  dialog.value = true
  dialogData.value = data
  console.log('打开详情', data)
}

// 添加状态处理函数
const getStatusClass = (status) => {
  const statusMap = {
    0: 'waiting',
    1: 'failed',
    2: 'success'
  }
  return statusMap[status]
}

const getStatusText = (status) => {
  const statusMap = {
    0: '待审核',
    1: '审核未通过',
    2: '审核已通过'
  }
  return statusMap[status]
}

// 添加职位状态文本获取函数
const getJobStatusText = (status) => {
  return status === 0 ? '正常' : '已下线'
}

const getJobStatusClass = (status) => {
  return status === 0 ? 'normal' : 'offline'
}
</script>

<template>
  <div class="management-wrapper">
    <div class="content-container">
      <!-- 搜索区域 -->
      <div class="search-card">
        <div class="card-header">
          <div class="title">
            <el-icon><Search /></el-icon>
            <span>职位筛选</span>
          </div>
        </div>
        <Form
          :data="formData"
          :formOpt="formModel"
          :btnOpt="btnOpt"
          @handleForm="handleForm"
          ref="selectFormRef"
          class="animated-form"
        />
      </div>

      <!-- 表格区域 -->
      <div class="table-card">
        <div class="card-header">
          <div class="title">
            <el-icon><List /></el-icon>
            <span>职位列表</span>
          </div>
          <div class="total-count">
            共 <span class="highlight">{{ pagizationToatl }}</span> 条数据
          </div>
        </div>

        <Table
          :tableData="tableData"
          :columns="columns"
          :options="options"
          @handleTable="handleTable"
          class="enhanced-table"
        >
          <template #firstColumn>
            <el-table-column type="index" label="序号" width="80" align="center" />
          </template>

          <!-- 添加审核状态的自定义插槽 -->
          <template #status="{ row }">
            <div class="status-tag" :class="getStatusClass(row.status)">
              <div class="status-dot"></div>
              <span>{{ getStatusText(row.status) }}</span>
            </div>
          </template>
        </Table>

        <div class="pagination-area">
          <Pagization
            ref="pagizationRef"
            :total="pagizationToatl"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
          />
        </div>
      </div>

      <!-- 详情抽屉 -->
      <el-drawer
        v-model="dialog"
        direction="rtl"
        size="460px"
        :destroy-on-close="true"
        class="detail-drawer"
      >
        <template #header>
          <div class="drawer-header">
            <el-icon><Document /></el-icon>
            <span>职位详情</span>
          </div>
        </template>

        <div class="drawer-content">
          <div class="info-group">
            <div class="group-title">
              <el-icon><OfficeBuilding /></el-icon>
              <span>企业信息</span>
            </div>
            <div class="info-item">
              <label>企业名称：</label>
              <span>{{ dialogData.enterpriseName }}</span>
            </div>
          </div>

          <div class="info-group">
            <div class="group-title">
              <el-icon><Briefcase /></el-icon>
              <span>职位信息</span>
            </div>
            <div class="info-item">
              <label>职位名称：</label>
              <span>{{ dialogData.jobName }}</span>
            </div>
            <div class="info-item">
              <label>岗位薪资：</label>
              <span class="salary">{{ dialogData.salary }}</span>
            </div>
            <div class="info-item">
              <label>职位描述：</label>
              <p class="description">{{ dialogData.jobDesc }}</p>
            </div>
            <div class="info-item">
              <label>任职要求：</label>
              <p class="description">{{ dialogData.jobRequire }}</p>
            </div>
          </div>

          <div class="info-group">
            <div class="group-title">
              <el-icon><Location /></el-icon>
              <span>地址信息</span>
            </div>
            <div class="info-item">
              <label>所在地区：</label>
              <span>{{ dialogData.jobLocation }}</span>
            </div>
            <div class="info-item">
              <label>详细地址：</label>
              <span>{{ dialogData.jobDetailLocation }}</span>
            </div>
          </div>

          <div class="info-group">
            <div class="group-title">
              <el-icon><Timer /></el-icon>
              <span>发布信息</span>
            </div>
            <div class="info-item">
              <label>发布时间：</label>
              <span>{{ dialogData.create_time }}</span>
            </div>
          </div>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.management-wrapper {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20px;

  .content-container {
    width: 100%;
    // margin: 0 auto;
    animation: fadeIn 0.5s ease;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .title {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: 600;
      color: #303133;

      .el-icon {
        margin-right: 8px;
        font-size: 18px;
        color: #409eff;
      }
    }

    .total-count {
      font-size: 14px;
      color: #606266;

      .highlight {
        color: #409eff;
        font-weight: 600;
        margin: 0 4px;
      }
    }
  }

  .search-card,
  .table-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    margin-bottom: 20px;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }
  }

  .enhanced-table {
    :deep(.el-table) {
      border-radius: 8px;
      overflow: hidden;

      th {
        background-color: #f5f7fa;
        font-weight: 600;
      }

      tr {
        transition: all 0.3s ease;

        &:hover > td {
          background-color: #f5f7fa;
        }
      }

      // 添加状态标签样式
      .status-tag {
        display: inline-flex;
        align-items: center;
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 500;
        transition: all 0.3s ease;

        .status-dot {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          margin-right: 6px;
        }

        // 待审核状态
        &.waiting {
          background-color: #e6f7ff;
          color: #1890ff;

          .status-dot {
            background-color: #1890ff;
            animation: pulse 2s infinite;
          }
        }

        // 审核未通过状态
        &.failed {
          background-color: #fff2f0;
          color: #f5222d;

          .status-dot {
            background-color: #f5222d;
          }
        }

        // 审核已通过状态
        &.success {
          background-color: #f6ffed;
          color: #52c41a;

          .status-dot {
            background-color: #52c41a;
          }
        }

        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
      }
    }
  }

  .pagination-area {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
}

.detail-drawer {
  .drawer-header {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    color: #303133;

    .el-icon {
      margin-right: 8px;
      color: #409eff;
    }
  }

  .drawer-content {
    padding: 20px;

    .info-group {
      margin-bottom: 32px;
      animation: slideUp 0.4s ease;

      .group-title {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 1px solid #ebeef5;
        font-size: 16px;
        font-weight: 600;
        color: #303133;

        .el-icon {
          margin-right: 8px;
          color: #409eff;
        }
      }

      .info-item {
        margin-bottom: 16px;
        display: flex;
        align-items: flex-start;

        label {
          color: #909399;
          font-size: 14px;
          margin-right: 8px;
          min-width: 80px;
          text-align: right;
        }

        span,
        p {
          color: #303133;
          font-size: 14px;
          flex: 1;
          text-align: left;
        }

        .description {
          margin: 0;
          color: #606266;
          line-height: 1.6;
          white-space: pre-wrap;
          text-align: left;
        }

        .salary {
          color: #f56c6c;
          font-weight: 500;
        }
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 添加脉冲动画效果
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
</style>
